<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Beijing Weather</title>
    <style>
        /* 完全隐藏滚动条但保留滚动功能 */
        .scroll-container {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }
        .scroll-container::-webkit-scrollbar {
            display: none;  /* Chrome, Safari and Opera */
        }
        .weather-card {
            background: linear-gradient(135deg, #e0f7fa 0%, #fff3e0 100%);
        }
        .search-box {
            background-color: rgba(255, 255, 255, 0.8);
        }
        .aqi-badge {
            background-color: #4caf50;
        }
    </style>
</head>

<body class="overflow-hidden">
    <div class="flex w-screen h-screen">
        <!-- 左侧容器 - 隐藏滚动条但保留滚动功能 -->
        <div class="flex flex-col w-[460px] h-screen bg-slate-300 overflow-hidden">
            <!-- 固定顶部块 -->
            <div class="flex-shrink-0 w-[460px] h-[60px] bg-slate-50">
                <div class="w-[460px] h-[60px] flex items-center justify-between mb-4 px-2">
                    <div class="flex items-center">
                        <div class="w-[125px] h-[30px] bg-[url('./images/和风图标.png')]" style="background-position: 0px 0px;">
                        </div>
                    </div>
                    
                    <div class="relative w-[280px] ml-4">
                        <input type="text" 
                            placeholder="搜索城市" 
                            class="search-box w-full pl-10 pr-4 py-2 rounded-full border border-gray-200 
                                    text-sm focus:outline-none focus:ring-1 focus:ring-gray-300">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>
                </div>
            </div>
            
            <!-- 可滚动内容区域 -->
            <div class="flex-1 overflow-y-auto scroll-container">
                <div class="flex-shrink-0 w-[428px] h-[405px] mx-auto mt-4">
    <div class="w-[428px] rounded-[23px] weather-card p-6 shadow-sm relative">
        <div class="flex justify-between items-start mb-6">
            <div class="flex items-baseline">
                <div class="text-xl font-bold mr-2">黄州区</div>
                <div class="text-gray-600 text-sm">湖北省/中国</div>
            </div>
            <div class="text-right">
                <div class="text-gray-500 text-sm">2025-09-02 14:40</div>
                <div class="aqi-badge text-white text-xs px-2 py-1 rounded-full mt-1 inline-block">
                    AQI 优
                </div>
            </div>
        </div>
        
        <div class="flex justify-center items-center mb-6">
            <img src="images/太阳.png" 
                 alt="晴天图标" class="w-[100px] h-[100px] mr-2">
            <div class="text-5xl font-bold">33°</div>
            <div class="ml-2 text-xl font-medium">晴</div>
        </div>
        
        <div class="text-center mb-8 text-gray-700">
            今天白天晴，夜晚晴，温度和昨天差不多，现在33°，空气不错。
        </div>
        
        <div class="flex justify-around items-center bg-white/50 rounded-xl p-4">
            <div class="text-center">
                <div class="text-lg font-medium">1级</div>
                <div class="text-gray-600 text-sm">东北风</div>
            </div>
            <div class="text-center">
                <div class="text-lg font-medium">54%</div>
                <div class="text-gray-600 text-sm">相对湿度</div>
            </div>
        </div>
    </div>
                </div>
                <div class="flex-shrink-0 w-[428px] h-[345.33px] mx-auto mt-4">
                    <div class="flex flex-col rounded-[23px] items-center justify-between w-[428px] h-[345px] bg-slate-200 p-7">
                        <div class="flex w-[400px] px-7 justify-between">
                            <div class="flex flex-col w-[60px] h-[50px] bg-slate-200">
                                <h1>今天</h1>
                                <h2>9月2日</h2>
                            </div>
                            <div>
                                <img class="w-[60px] h-[50px]" src="images//太阳.png" alt="">
                            </div>
                            <div class="flex bg-slate-200 w-[150px] h-[50px] items-center">
                                <h1>33°</h1>
                                <h1 class="bg-gradient-to-r from-[#6e8efb] to-[#a777e3] rounded-[23px] w-[130px] h-[7px]"></h1>
                                <h1>24°</h1>
                            </div>
                            <div>
                                <img class="w-[50px] h-[50px]" src="images//开始.png" alt="">
                            </div>
                        </div>
                        <div class="flex w-[400px] px-7 justify-between">
                            <div class="flex flex-col w-[60px] h-[50px] bg-slate-200">
                                <h1>周三</h1>
                                <h2>9月3日</h2>
                            </div>
                            <div>
                                <img class="w-[50px] h-[40px]" src="images//大雨.png" alt="">
                            </div>
                            <div class="flex bg-slate-200 w-[150px] h-[50px] items-center">
                                <h1>33°</h1>
                                <h1 class="bg-gradient-to-r from-[#6e8efb] to-[#a777e3] rounded-[23px] w-[130px] h-[7px]"></h1>
                                <h1>25°</h1>
                            </div>
                            <div>
                                <img class="w-[50px] h-[50px]" src="images//开始.png" alt="">
                            </div>
                        </div>
                        <div class="flex w-[400px] px-7 justify-between">
                            <div class="flex flex-col w-[60px] h-[50px] bg-slate-200">
                                <h1>周四</h1>
                                <h2>9月4日</h2>
                            </div>
                            <div>
                                <img class="w-[50px] h-[40px]" src="images//大雨.png" alt="">
                            </div>
                            <div class="flex bg-slate-200 w-[150px] h-[50px] items-center">
                                <h1>32°</h1>
                                <h1 class="bg-gradient-to-r from-[#6e8efb] to-[#a777e3] rounded-[23px] w-[130px] h-[7px]"></h1>
                                <h1>26°</h1>
                            </div>
                            <div>
                                <img class="w-[50px] h-[50px]" src="images//开始.png" alt="">
                            </div>
                        </div>
                        <div class="flex w-[400px] px-7 justify-between">
                            <div class="flex flex-col w-[60px] h-[50px] bg-slate-200">
                                <h1>周五</h1>
                                <h2>9月5日</h2>
                            </div>
                            <div>
                                <img class="w-[55px] h-[45px]" src="images//浓云.png" alt="">
                            </div>
                            <div class="flex bg-slate-200 w-[150px] h-[50px] items-center">
                                <h1>35°</h1>
                                <h1 class="bg-gradient-to-r from-[#6e8efb] to-[#a777e3] rounded-[23px] w-[130px] h-[7px]"></h1>
                                <h1>26°</h1>
                            </div>
                            <div>
                                <img class="w-[50px] h-[50px]" src="images//开始.png" alt="">
                            </div>
                        </div>
                        <div class="flex w-[400px] px-7 justify-between">
                            <div class="flex flex-col w-[60px] h-[50px] bg-slate-200">
                                <h1>周六</h1>
                                <h2>9月6日</h2>
                            </div>
                            <div>
                                <img class="w-[55px] h-[45px]" src="images//天气-7.png" alt="">
                            </div>
                            <div class="flex bg-slate-200 w-[150px] h-[50px] items-center">
                                <h1>31°</h1>
                                <h1 class="bg-gradient-to-r from-[#6e8efb] to-[#a777e3] rounded-[23px] w-[130px] h-[7px]"></h1>
                                <h1>26°</h1>
                            </div>
                            <div>
                                <img class="w-[50px] h-[50px]" src="images//开始.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex-shrink-0 w-[428px] h-[336px] mx-auto mt-4">
                    <div class="w-[428px] h-[336px] bg-white rounded-xl shadow-lg overflow-hidden p-5">
                        
                        <!-- 标题区域 -->
                        <header class="mb-5">
                            <h1 class="text-xl font-bold text-primary">
                                <i class="fas fa-calendar-alt mr-2"></i> 未来30天预报
                            </h1>
                        </header>
                        
                        <!-- 天气预报摘要 -->
                        <div class="bg-blue-50 rounded-lg p-3 mb-5 border-l-4 border-blue-500">
                            <p class="text-sm">
                                未来30天将有<span class=" font-bold">16天</span>下雨，有<span class=" font-bold">1天</span>温度超过35°，最高温<span class=" font-bold">36°</span>（09月15日），最低温<span class=" font-bold">14°</span>（09月29日，09月30日，10月01日）。
                            </p>
                        </div>
                        
                        <!-- 卫星云图区域 -->
                        <div class="bg-gray-800 rounded-lg p-3 text-white mb-5 relative">
                            <!-- 云图背景效果 -->
                            <div class="absolute inset-0 bg-gradient-to-b  to-gray-900 opacity-90 rounded-lg"></div>
                            
                            
                            
                            
                            <h2 class="text-base text-blue-200 mb-1 relative z-10">
                                <i class="fas fa-satellite mr-2"></i> 全球实时卫星云图
                            </h2>
                            <h3 class="text-sm text-blue-300 relative z-10">看看你头顶的云 飘到哪里去了</h3>
                        </div>
                        
                    
                        
                    </div>
                </div>
                <div class="flex-shrink-0 w-[428px] h-[415px] mx-auto mt-4">
                    <div class="w-[428px] h-[206px] flex justify-evenly">
        <div class="flex w-[210px] h-[206px] flex-col items-center rounded-[23px] bg-slate-200 p-7">
            <div class="justify-center">
                <img class="justify-center w-[85px] h-[85px] " src="images/class1.jpg" alt="">
            </div>
            <div class="justify-center items-center flex text-black text-xs p-2">优</div>
            <div class="justify-center items-end flex gap-1 text-green-400">
                <div class="text-2xl">AQI</div>
                <div class="text-2xl">48</div>
            </div>
        </div>
        <div class="flex w-[210px] h-[206px] flex-col items-center rounded-[23px] bg-red-200 p-7">
            <div class="justify-center">
                <img class="items-center w-[85px] h-[85px] " src="images/class2.jpg" alt="">
            </div>
            <div class="flex justify-center items-center  text-black p-2">全国预警数量</div>
            <div class="justify-center items-end flex gap-1 text-red-400">
                <div class="text-2x1">689</div>
            </div>
        </div>
    </div>
    <div class="flex items-center w-[428px] h-[208px]  rounded-[23px] bg-gradient-to-r from-[#6ee3fb] to-[#77b6e3]">
        <div class="">
        <div class="text-black">和风天气APP</div>
        <div class="text-gray-500">全球可视化天气应用</div>
</div>
</div>
                </div>
                                <div class="flex-shrink-0 w-[428px] h-[424px]  mx-auto mt-4 mb-4">
                        <div class="flex w-[428px] h-[180px] rounded-[23px] background-color: bg-gray-800 justify-center items-center">
                            <div class="flex flex-col  w-1/2 h-1/2 float-left justify-center items-center">
                                    <p class="text-white text-[20x]">和风天气插件</p>
                                    <p class="text-gray-400 w-[171px] h-[48px]">想把和风天气的数据加入到你的产品中吗？</p>   
                            </div>
                            <div>
                                <img class="w-[178px] h-[137px] flex-1" src="./images/index-plugin.png" alt=""/>
                            </div> 
                        </div>
                        
                        <div class="flex w-[428px] h-[244px] flex-col bg-white rounded-[23px] ">
                            <div class="flex w-[428px] h-1/2 justify-evenly">
                                <div class="flex-col">
                                <img class="w-[60px] h-[60px] fexl-col" src="./images/sun.png" alt=""/>天气预报
                                </div>
                                <div class="flex-col">
                                <img class="w-[60px] h-[60px] " src="./images/air.png" alt=""/>空气质量
                                </div>
                                <div class="flex-col">
                                <img class="w-[60px] h-[60px] " src="./images/dangerous.png" alt=""/>灾害预警
                                </div>
                            </div>
                            <div class="flex w-[428px] h-1/2 justify-evenly ">
                                <div class="flex-col">
                                <img class="w-[60px] h-[60px] fexl-col" src="./images/map.png" alt=""/>天气地图
                                </div>
                                <div class="flex-col">
                                <img class="w-[60px] h-[60px] fexl-col" src="./images/satellite.png" alt=""/>卫星和雷达
                                </div>
                                <div class="flex w-[60px] h-[60px]"></div>
                            </div>
                        </div>  
        </div>
            </div>
        </div>
        <div id="container" class="flex flex-1 h-screen">
            <div class="w-460px h-[60px] flex"></div>
        </div>
</body>
 <script src="https://map.qq.com/api/gljs?v=1.exp&key=H5NBZ-2MYWJ-CJNFC-DWLGB-OJNVV-SJFVR"></script>
    <script>
        //地图初始化函数，本例取名为init，开发者可根据实际情况定义
        function initMap() {
            //定义地图中心点坐标
            var center = new TMap.LatLng(39.984120, 116.307484)
            //定义map变量，调用 TMap.Map() 构造函数创建地图
            var map = new TMap.Map(document.getElementById('container'), {
                center: center,//设置地图中心点坐标
                zoom: 17.2,   //设置地图缩放级别
                pitch: 43.5,  //设置俯仰角
                rotation: 45    //设置地图旋转角度
            });
        }
        initMap();
    </script>
</html>